<template>
  <div class="page-container">
    <SearchForm
      :search-list="searchList"
      :search-params="searchParams"
      @search="onSearch"
      @reset="onReset"
    />
    <div class="table-box">
      <el-table
        v-loading="loading"
        height="100%"
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
      >
        <el-table-column label="ID" align="center" width="80" prop="id" />
        <el-table-column label="API路径" prop="url" />
        <el-table-column label="请求方法" width="100">
          <template slot-scope="scope">
            <el-tag :type="methodTagType(scope.row.method)">{{ scope.row.method }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态码" width="100">
          <template slot-scope="scope">
            <el-tag :type="statusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="IP地址" width="140" prop="ip" />
        <el-table-column label="国家" width="140" prop="country" />
        <el-table-column label="请求时间" width="180" prop="create_time" />
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>

    <!-- 详情弹窗 -->
    <el-dialog title="API访问详情" :visible.sync="dialogVisible" width="60%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="请求路径">{{ currentDetail.path }}</el-descriptions-item>
        <el-descriptions-item label="请求方法">{{ currentDetail.method }}</el-descriptions-item>
        <el-descriptions-item label="状态码">{{ currentDetail.status }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ currentDetail.ip }}</el-descriptions-item>
        <el-descriptions-item label="国家">{{ currentDetail.country }}</el-descriptions-item>
        <el-descriptions-item label="请求时间">{{ currentDetail.created_at }}</el-descriptions-item>
        <el-descriptions-item label="请求参数">
          <pre>{{ formatJson(currentDetail.request_body) }}</pre>
        </el-descriptions-item>
        <el-descriptions-item label="响应内容">
          <pre>{{ formatJson(currentDetail.response_body) }}</pre>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http } from '@/api'

export default {
  name: 'ApiLog',
  mixins: [crud],
  data() {
    return {
      request: http.apiLog,
      searchList: [
        {
          key: 'path',
          name: 'input',
          label: 'API路径'
        },
        {
          key: 'method',
          name: 'select',
          label: '请求方法',
          options: [
            { label: 'GET', value: 'GET' },
            { label: 'POST', value: 'POST' },
            { label: 'PUT', value: 'PUT' },
            { label: 'DELETE', value: 'DELETE' }
          ]
        },
        {
          key: 'status',
          name: 'input',
          label: '状态码'
        },
      ],
      searchParams: {
        path: '',
        method: '',
        status: '',
        timeRange: []
      },
      dialogVisible: false,
      currentDetail: {}
    }
  },
  methods: {
    methodTagType(method) {
      const types = {
        GET: 'success',
        POST: 'primary',
        PUT: 'warning',
        DELETE: 'danger'
      }
      return types[method] || 'info'
    },
    statusTagType(status) {
      if (status >= 200 && status < 300) return 'success'
      if (status >= 300 && status < 400) return 'warning'
      if (status >= 400) return 'danger'
      return 'info'
    },
    showDetail(row) {
      this.currentDetail = row
      this.dialogVisible = true
    },
    formatJson(json) {
      if (!json) return ''
      try {
        return JSON.stringify(JSON.parse(json), null, 2)
      } catch (e) {
        return json
      }
    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.table-box {
  flex: 1;
  overflow: hidden;
  margin: 20px 0;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  font-family: monospace;
}
</style>
